<template>
    <div class="all">
        <!-- <div style="text-align:center;font-size:28px;font-weight:bold;">{{$route.name}}</div> -->
        <div class="table">
            <!-- 表格 -->
            <el-table
                :data="videoTable"
                border
                :style="{width:screenWidth+'px'}"
                :cell-style="cellStyle"
                :header-cell-style="rowClass"
                @selection-change="allSelectionChange"
            >
                <!-- <el-table-column type="selection" width="60px"></el-table-column> -->
                <!-- <el-table-column type="index" label="序号" width="80px"></el-table-column> -->
                <el-table-column label="视频" width="160px">
                    <template slot-scope="scope">
                        <video :src="scope.row.videoUrl"></video>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.createTime }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="100px">
                    <template slot-scope="scope">
                        <el-button
                            size="small"
                            type="primary"
                            @click="edit(scope.$index, scope.row)"
                        >修改</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <!-- <el-pagination
                @size-change="pageCount"
                @current-change="currentPageCount"
                :current-page="currentPage"
                :page-sizes="[100, 500,1000,1500, 2000]"
                :page-size="currentCount"
                layout="prev, pager, next, jumper, sizes,total"
                :total="pageResultSize"
            ></el-pagination>-->
        </div>
        <div>
            <!-- 修改对话框 -->
            <el-dialog title="修改" width="60%" :visible.sync="editVisible" center @close="closeEdit">
                <el-form :model="editVideo">
                    <el-form-item label="视频：" :label-width="formLabelWidth">
                        <el-upload
                            ref="videoUrl"
                            v-model="editVideo.videoUrl"
                            :action="addUploadUrl"
                            :show-file-list="false"
                            list-type="picture-card"
                            :before-upload="editVideoUpload"
                            :on-preview="editVideoPreview"
                            :on-progress="editVideoProcess"
                            :http-request="editVideoUploadEvent"
                            :on-exceed="editVideoExceedLimit"
                            :on-remove="editVideoRemove"
                        >
                            <video
                                v-if="editVideo.videoUrl && !videoFlag"
                                :src="editVideo.videoUrl"
                                class="avatar"
                            ></video>
                            <!-- <img v-if="editVideo.videoUrl" :src="editVideo.videoUrl" class="avatar" /> -->
                            <i
                                v-else-if="editVideo.videoUrl=='' && !videoFlag"
                                class="el-icon-plus"
                            ></i>
                            <el-progress
                                v-if="videoFlag == true"
                                type="circle"
                                :percentage="videoUploadPercent"
                                style="margin-top:7px;"
                            ></el-progress>
                        </el-upload>
                    </el-form-item>
                </el-form>
                <div slot="footer">
                    <el-button @click="cancelEdit">取 消</el-button>
                    <el-button type="primary" @click="confirmEdit">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import echarts from "echarts";
import "../../../static/scss/page.scss";
import utils from "../../util/request";
export default {
    data() {
        return {
            // 分页
            currentPage: 1, //初始页面
            currentCount: 100, //当前页面的数据数量
            pageResultSize: 10, //表格数据总数
            screenWidth: window.innerWidth, //可视宽度
            editVisible: false, //修改对话框
            addUploadUrl: "https://jsonplaceholder.typicode.com/posts/", //上传服务器路径
            videoFlag: false, //显示进度条
            videoUploadPercent: "", //进度条的进度
            formLabelWidth: "100px", //对话框的label宽度
            editVideo: {
                // 修改对话框
                videoUrl: "" //视频
            },
            videoTable: [
                {
                    videoUrl: "", //视频
                    createTime: "2020-09-18" //创建时间
                }
            ]
        };
    },
    methods: {
        searchClick() {
            // 查询
        },
        endvideo() {
            // 开启活动时点击按钮要关闭活动
            this.videoStatus = 1; //关闭活动
        },
        startvideo() {
            //结束活动时点击按钮要开启活动
            this.videoStatus = 0; //开启活动
        },
        edit(index, row) {
            // 修改
            this.editVisible = true;
            this.editVideo.videoUrl = row.videoUrl;
        },
        editVideoPreview(file) {
            // 点击文件列表中已上传的文件时的钩子
            console.log(file);
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        editVideoExceedLimit() {
            // 项目图片超过数量限制事件
            this.$message({
                type: "error",
                message: "上传图片数量已达到限制!"
            });
        },
        editVideoProcess(event, file, fileList) {
            this.videoFlag = true;
            this.videoUploadPercent = file.percentage.toFixed(0) * 1;
        },
        editVideoUpload(file) {
            // 上传图片之前的钩子
            console.log(file);
            // return new Promise((resolve, reject) => {
            //     let _URL = window.URL || window.webkitURL;
            //     let isLt2M = file.size / 1024 / 1024 > 0.3; // 判定图片大小是否小于0.3MB
            //     // 这里需要计算出图片的长宽
            //     let img = new Image();
            //     img.onload = function() {
            //         file.width = img.width; // 获取到width放在了file属性上
            //         file.height = img.height; // 获取到height放在了file属性上
            //         let valid = img.width > 2000; // 图片宽度大于2000
            //         // console.log(11, file)
            //         // 这里我只判断了图片的宽度,compressAccurately有多个参数时传入对象
            //         if (valid || isLt2M) {
            //             compressAccurately(file, {
            //                 size: 100,
            //                 width: 690
            //             }).then(res => {
            //                 // console.log(33, res)
            //                 resolve(res);
            //             });
            //         } else resolve(file);
            //     }; // 需要把图片赋值
            //     img.src = _URL.createObjectURL(file);
            // });
        },
        editVideoUploadEvent(file) {
            // 图片上传至服务器
            console.log(file);
            // 上传成功进图条不显示，进度为0
            this.videoFlag = false;
            this.videoUploadPercent = 0;
            // let formData = new FormData();
            // formData.append("file", file.file);
            // console.log(formData);
            // let instance = axios.create({
            //     baseURL: "https://admin.jljinhong.club/",
            //     headers: {
            //         Authorization: "Bearer " + localStorage.jh_token, //token
            //         "Content-Type": "multipart/form-data"
            //     }
            // });
            // instance.post("ImageUpload", formData).then(res => {
            //     console.log(res);
            //     if (res.data.code == 20000) {
            //         this.editVideo.videoUrl = res.data.data; //表单里的图片路径
            //         console.log(this.editVideo.videoUrl);
            //     }
            //     if (res.data.code == 20004) {
            //         this.$message({
            //             type: "error",
            //             message: "请重新登录!"
            //         });
            //         this.$router.push({ path: "/" });
            //     }
            //     if (res.data.code == 20008) {
            //         this.$message({
            //             type: "error",
            //             message: "图片过大，请上传小于5M的图片!"
            //         });
            //     }
            // });
        },
        editVideoRemove: function(file, fileList) {
            // 上传完成时在文件列表里移除的事件
            console.log(file, fileList);
            // let src = this.editVideo.videoUrl;
            // let indexOf = src.lastIndexOf("/"); //找到图片路径的最后一个斜杠
            // let fileName = src.substring(indexOf + 1); //最后一个斜杠加一表示找到了图片的名字中的第一位
            // console.log(fileName);
            // request
            //     .request("ImageDELETE?fileName=" + fileName, "delete")
            //     .then(res => {
            //         console.log(res);
            //         if (res.data.code == 20000) {
            //             this.$message({
            //                 type: "success",
            //                 message: "删除成功!"
            //             });
            //             this.editVideo.videoUrl = ""; //表单里的图片路径为空
            //         }
            //         if (res.data.code == 20001) {
            //             this.$message({
            //                 type: "error",
            //                 message: "删除失败或文件不存在！"
            //             });
            //         }
            //     });
        },
        confirmEdit() {
            // 确认修改对话框
            this.editVisible = false;
        },
        cancelEdit() {
            // 取消修改对话框
            this.editVisible = false;
        },
        closeEdit() {
            // 关闭修改对话框
            this.editVisible = false;
        },
        //   表格居中
        cellStyle: function({ row, column, rowIndex, columnIndex }) {
            return "text-align:center;";
        },
        rowClass: function({ row, rowIndex }) {
            return "text-align:center;";
        },
        allSelectionChange: function(val) {
            // 获取选中的内容
            console.log(val);
            this.selectTable = val;
        },
        // 每页数据的数量
        pageCount: function(val) {
            this.currentCount = val;
        },
        // 点击的第几页
        currentPageCount: function(val) {
            this.currentPage = val;
        }
    },
    mounted() {},
    created() {}
};
</script>




